<template>
	<view name="increase">
		<cu-custom bgColor="bg-red" :isBack="true"><block slot="backText">返回</block><block slot="content"> {{!id?'新增':'修改'}}</block></cu-custom>
		<form>
			<view class="cu-form-group" v-for="(item,index) in list" :key="index">
				<view class="title">{{item.name}}</view>
				<!-- 单行文本 -->
				<input v-if="item.type == 'input'" v-model="item.value" :placeholder="'请输入'+item.name" name="input"></input>
				<!-- 普通选择 -->
				<picker v-if="item.type == 'picker'" @change="PickerChange($event,item)" :value="item.index" :range="item.picker">
					<view class="picker">
						{{item.index>-1?item.picker[item.index]:'请选择'}}
					</view>
				</picker>
				<!-- 时间选择 -->
				<picker v-if="item.type == 'time'" mode="time" :value="item.value" start="00:00" end="23:59" @change="TimeChange($event,item)">
					<view class="picker">
						<text v-if="item.value">{{item.value}}</text>
						<text v-else>请选择</text>
					</view>
				</picker>
				<!-- 日期选择 -->
				<picker v-if="item.type == 'date'" mode="date" :value="item.value" start="2000-01-01" end="2050-01-01" @change="DateChange($event,item)">
					<view class="picker">
						<text v-if="item.value">{{item.value}}</text>
						<text v-else>请选择</text>
					</view>
				</picker>
				<!-- 地区选择 -->
				<!-- #ifndef H5 || APP-PLUS || MP-ALIPAY -->
				<picker v-if="item.type == 'region'" mode="region" @change="RegionChange($event,item)" :value="item.value">
					<view class="picker">
						<text v-if="item.value[0]">{{item.value[0]}}，{{item.value[1]}}，{{item.value[2]}}</text>
						<text v-else>请选择</text>
					</view>
				</picker>
				<!-- #endif -->
				<!-- 多行文本 -->
				<textarea v-if="item.type == 'textarea'" v-model="item.value" maxlength="-1" placeholder="多行文本输入框"></textarea>
			</view>
			<!-- 图片上传 -->
			<view class="cu-bar bg-white margin-top">
				<view class="action">
					图片上传
				</view>
				<view class="action">
					{{imgList.length}}/4
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
					 <image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view>
		</form>
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-red margin-tb-sm lg" @tap="submit()">保 存</button>
		</view>
	</view>
</template>

<script>
	import graceChecker from '@/graceUI/graceChecker.js'
	export default {
		name:'increase',
		data() {
			return {
				id: null,
				imgList: [],
				list:[{
					type:'input',
					name:'名称',
					valueName:'name',
					value:null
				},{
					type:'time',
					name:'时间',
					valueName:'time',
					value:null,
				},{
					type:'date',
					name:'日期',
					valueName:'date',
					value:null,
				},{
					type:'textarea',
					name:'文本',
					valueName:'content',
					value:null
				},{
					type:'picker',
					name:'普通选择',
					valueName:'index',
					index: -1,//默认选择项下标
					picker: ['喵喵喵', '汪汪汪', '哼唧哼唧'],//选择列表,
					value:null
					
				},{
					type:'region',
					name:'地区选择',
					valueName:'region',
					value: [],//必须是数组
				}],
				formRules:[
					{ name: "medium", checkType: "notnull", checkRule: "", errorMsg: "请输入..."},
				],
			}
		},
		onLoad(options) {
			if(options.id){
				this.id = options.id
				this.infoHandle(options.id)
			}
		},
		methods: {
			infoHandle(id){//获取详情
				let _this = this
				// $http.getInfo(id).then( res => {
				// 	if(res.code == 0){
				// 		this.info = res.data
						this.list = [{
							type:'input',
							name:'名称',
							valueName:'name',
							value:"名称值"
						},{
							type:'time',
							name:'时间',
							valueName:'time',
							value:"00:00",//默认时间
						},{
							type:'date',
							name:'日期',
							valueName:'date',
							value:"2019-07-23",//默认日期
						},{
							type:'textarea',
							name:'文本',
							valueName:'content',
							value:"文本内容"
						},{
							type:'picker',
							name:'普通选择',
							valueName:'index',
							index: 0,//默认选择项下标
							picker: ['喵喵喵', '汪汪汪', '哼唧哼唧'],//选择列表,
							value:"喵喵喵"
							
						},{
							type:'region',
							name:'地区选择',
							valueName:'region',
							value: ['北京市', '北京市', '东城区'],//默认地区
						}]
				// 	}
				// }).catch( err => {});
			},
			getCurPage(){/*获取当前路由*/
				let pages = getCurrentPages();
				let curPage = pages[pages.length-1];
				return curPage
			},
			PickerChange(e,item) {
				item.index = e.detail.value
				item.value = item.picker[e.detail.value]
			},
			TimeChange(e,item) {
				item.value = e.detail.value
			},
			DateChange(e,item) {
				item.value = e.detail.value
			},
			RegionChange(e,item) {
				item.value = e.detail.value
			},
			//上传图片
			ChooseImage() {
                let _this = this
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
                        const tempFilePaths = this.imgList;
                        const uploadTask = uni.uploadFile({
                            url : config.websiteBaseUrl + "/oss/upload",
                            filePath: tempFilePaths,
                            name: 'file',
                            header: {
                                'token': $auth.getUserToken()
                            },
                            success: function (result) {
                                let arr = JSON.parse(result)
								var url =""
								for(var i=0;arr.length;i++){
                                    url+=arr[i].name
                                    url+=",";
								}
                                _this.dataForm.url = url.substring(0,url.length-1)
                            }
                        });
					}
				});
			},
			// 查看大图
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			// 删除图片
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这张图片吗？',
					cancelText: '再看看',
					confirmText: '再见',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			submit(){
				//进行表单检查
				var checkRes = graceChecker.check(this.dataForm, this.formRules);
				if(!checkRes){
					uni.showToast({ title: graceChecker.error, icon: "none" });
					return;
				}
				$http[this.dataForm.id?'update':'add'](this.dataForm).then( res => {
					if(res.code == 0){
						uni.showToast({
							title: '保存成功',
							icon:"success"
						});
						setTimeout(function () {
							uni.reLaunch({
								url: "/pages/index/index"
							})
						}, 2000);
						
					}
				}).catch( err => {
					
				});
			}
		}
	}
</script>

<style>
</style>
